<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Scrum Board App</title>
		<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
		<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
		<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
		<!--Custom styles and CSS-->
		<link rel="stylesheet" type="text/css" href="css/jqm-docs.css" />
		<script type="text/javascript" src="script/SQLdb.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
        
        <!--Drag and Drop-->
        <script type="text/javascript" src="script/jquery.mobiledragdrop.js"></script>
	<script type="text/javascript">
		$('#liveboardpg').live('pageshow', function(event, ui) {
			$(".stickynote").mobiledraganddrop({ targets: ".ui-block-b,.ui-block-c,.ui-block-d,.ui-block-e"});
		});
	</script>

        
	</head>
	<body>
        <!--List pages-->
        <!---PBI List-->
		<div data-role="page" id="projectspg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
				<a data-icon="refresh" onClick="get_projects_list();" class="ui-btn-right" href="#">Refresh</a>
			</div>
			<div data-role="content">
            <div class="content-secondary">
            <a href="#addprojpg" data-role="button">Start a New Project</a>
            	
				<ul data-role="listview" data-split-icon="gear" id="projectslv" data-split-theme="b" data-inset="true">
					<li data-role="list-divider">
						Projects
					</li>
					<li>
						<a href="#projdetialspg"><h3></h3>
						<p>
							
						</p> </a>
						<a href="#">Edit Details</a>
					</li>
				</ul>
                </div>
                <div class="content-primary">
<h3>Scrum Project</h3>
                	<img src="images/artifacts/project.png" class="projecticon"/>
                	<p>
						Scrum is an iterative and incremental methodology for software projects and product- or application-development. It is also one of the variants of agile software development methodologies.
					</p>
                    <p>Scrum has not only reinforced the interest in project management, but also challenged the conventional ideas about such management. Scrum focuses on inexperienced project management institutions where it is difficult to plan ahead with mechanisms for process control, where feedback loops constitute the core element of traditional command-and-control oriented management.</p>
                    <p>Click <b>Start a new project</b> to create a new profile for your project</p>
                    <p>Click <b>Terms and Conditions</b> to view the terms and conditions for using this app</p>
                    <p>Click <b>Contact Us</b> inorder to contact us regrading the scrumboard App</p>
                </div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
                    	<li>
							<a href="#addprojpg"  data-transition="slidedown" data-icon="plus">Add Project</a>
						</li>
                        <li>
                        	<a data-icon="info" class="ui-btn-right" href="#terms" data-rel="dialog" data-transition="slidedown">Terms and Conditions</a>
                        </li>
						<li>
							<a href="#contactuspg" data-icon="arrow-r">Contact Us</a>
						</li>
						<!--<li>
							<a href="#aboutapppg">About the scrum board App</a>
						</li>-->
					</ul>
				</div>
			</div>
		</div>
        <!--PBI List-->
        <div data-role="page" id="pbilistpg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
				<a href="#" data-icon="refresh" class="ui-btn-right">Refresh</a>
			</div>
			<div data-role="content">
            <div class="content-secondary">
				<ul data-role="listview" data-split-icon="gear" id="pbilv" data-split-theme="b" data-inset="true">
					<li data-role="list-divider">
						PBIs
					</li>
					<li>
						<a href="#pbidetialspg"><h3>2</h3>
						<p>
							user story1
						</p> </a>
						<a href="#">Edit Details</a>
					</li>
				</ul>
                </div>
                 <div class="content-primary">
                 	<h3>Product Backlog</h3>
                	 <img src="images/artifacts/Folder-websites-Folder-icon.png" class="projecticon">
              <p>The product backlog is an ordered list of "requirements" that is maintained for a product. It contains Product Backlog Items that are ordered by the Product Owner based on considerations like risk, business value, dependencies, date needed, etc. The features added to the backlog are commonly written in story format. The product backlog is the “What” that will be built, sorted in the relative order it should be built in. It is open and editable by anyone, but the Product Owner is ultimately responsible for ordering the stories on the backlog for the Development Team.</p>
              <p>The Product Backlog, and business value of each listed item is the responsibility of the Product Owner. The estimated effort to complete each backlog item is, however, determined by the Development Team. </p>
                </div>
                
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a href="#pbiaddpg" data-icon="plus" data-transition="slidedown">Add New PBI</a>
						</li>
						<li>
							<a href="#liveboardpg" data-icon="arrow-r">Live - Scrum Board</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
        
        <!--SBI List-->
        <div data-role="page" id="sbilistpg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
				<a href="#" data-icon="refresh" class="ui-btn-right">Refresh</a>
			</div>
			<div data-role="content">
            <div class="content-secondary">
				<ul data-role="listview" data-split-icon="gear" id="sbilv" data-split-theme="b" data-inset="true">
					<li data-role="list-divider">
						SBI List
					</li>
					<li>
						<a href="#"><h3>Design</h3>
						<p>
							Status
						</p> </a>
						<a href="#">Edit Details</a>
					</li>
				</ul>
                </div>
                <div class="content-primary">
                	<h3>Sprint Backlog</h3>
              <img src="images/artifacts/Graphite-Smooth-Folder-Works-icon.png" class="projecticon"/>
              <p>The sprint backlog is the list of work the Development Team must address during the next sprint. The list is derived by selecting stories/features from the top of the product backlog until the Development Team feels it has enough work to fill the sprint. This is done by the Development Team asking "Can we also do this?" and adding stories/features to the sprint backlog. The Development Team should keep in mind the velocity of its previous Sprints (total story points completed from each of the last sprints stories) when selecting stories/features for the new sprint, and use this number as a guide line of how much "effort" they can complete.</p>
              <p>parturient montes, nascetur ridiculus mus. Fusce felis erat, porta vitae rhoncus non, interdum quis diam. Sed tristique odio quis mi ornare in tincidunt sapien vulputate. Donec libero lorem, sagittis vel imperdiet non, lobortis sit amet nunc. Vestibulum in eros sit amet tellus rutrum placerat. Donec mattis laoreet ornare. Aenean nisi nunc, mollis nec rutrum vel, vestibulum a magna. </p>
              </div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a href="#sbiaddpg" data-icon="plus" data-rel="dialog" data-transition="slidedown">Add New SBI</a>
						</li>
						<li>
							<a href="#liveboardpg" data-icon="arrow-r">Live - Scrum Board</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
        
        
        
        
        
        <!--Project Details Page-->
		<div data-role="page" id="projdetialspg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
                <a href="#" onClick="get_current_details();" data-icon="refresh" class="ui-btn-right">Refresh</a>
			</div>
			<div data-role="content">
            <div class="content-secondary">
            <h3>Scrum Project</h3>
            	<img src="images/artifacts/project.png" class="projecticon"/>
                	<p>
						Scrum is an iterative and incremental methodology for software projects and product- or application-development. It is also one of the variants of agile software development methodologies.
					</p>
                    <p>Following details about the project will be shown</p>
                   <ol>
                   <li>Project ID</li>
                   <li>Project name</li>
                   <li>Project description</li>
                   <li>Project start date</li>
                   <li>Project end date</li>
                   <li>number of resources in the project </li>
                   <li>Project status</li>
                   </ol>
            </div>
            <div class="content-primary">
            	<img src="css/images/Folder-Blue-Download-icon.png" class="detailsimg">
            	<ul data-role="listview" id="projectdetailslv" data-inset="true">
					<li data-role="list-divider">
						Project Details
					</li>
					<li>
						Project ID:
					</li>
					<li>
						Project Name:
					</li>
					<li>
						Project Description:
					</li>
					<li>
						Start Date:
					</li>
					<li>
						End Date:
					</li>
					<li>
						Number of Resources:
					</li>
					<li>
						Project Status:
					</li>
				</ul>
            </div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>	
							<a href="#projectspg" onClick="delete_current_project();" data-icon="minus">Delete Project</a>
						</li>
						<li>
							<a href="#pbilistpg" data-icon="arrow-r">PBI's</a>
						</li>
                        <li>
							<a href="#liveboardpg" data-icon="arrow-r">Scrum Board</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

 <!--PBI Page-->
		<div data-role="page" id="pbidetialspg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
                <a href="#" data-icon="refresh" class="ui-btn-right">Refresh</a>
			</div>
			<div data-role="content">
            	<div class="content-secondary">
                <h3>Product Backlog</h3>
            	<img src="images/artifacts/Folder-websites-Folder-icon.png" class="projecticon">
              <p>The product backlog is an ordered list of "requirements" that is maintained for a product. It contains Product Backlog Items that are ordered by the Product Owner based on considerations like risk, business value, dependencies, date needed, etc. The features added to the backlog are commonly written in story format.</p>
            </div>
            <div class="content-primary">
            	<img src="css/images/Folder-Blue-Download-icon.png" class="detailsimg">
				<ul data-role="listview" id="pbidetailslv" data-inset="true">
					<li data-role="list-divider">
						PBI Details
					</li>
					<li>
						Project ID:
					</li>
					<li>
						Project Name:
					</li>
					<li>
						Project Description:
					</li>
					<li>
						Start Date:
					</li>
					<li>
						End Date:
					</li>
					<li>
						Number of Resources:
					</li>
					<li>
						Project Status:
					</li>
				</ul>
                </div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a href="#pbilistpg" onClick="delete_current_pbi();" data-icon="minus">Delete PBI</a>
						</li>
                         <li>
							<a href="#sbilistpg" data-icon="arrow-r">View SBIs</a>
						</li>
                        <li>
							<a href="#liveboardpg" data-icon="arrow-r">Live - Scrum Board</a>
						</li>
                        
					</ul>
				</div>
			</div>
		</div>
        <!--Sbi Detaails page-->
        <div data-role="page" id="sbidetialspg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
                 <a href="#" onClick="get_current_sbi_details();" data-icon="refresh" class="ui-btn-right">Refresh</a>
			</div>
			<div data-role="content">
            <div class="content-secondary">
            	<h3>Sprint Backlog</h3>
              <img src="images/artifacts/Graphite-Smooth-Folder-Works-icon.png" class="projecticon"/>
              <p>The sprint backlog is the list of work the Development Team must address during the next sprint. The list is derived by selecting stories/features from the top of the product backlog until the Development Team feels it has enough work to fill the sprint. This is done by the Development Team asking "Can we also do this?" and adding stories/features to the sprint backlog. The Development Team should keep in mind the velocity of its previous Sprints (total story points completed from each of the last sprints stories) when selecting stories/features for the new sprint, and use this number as a guide line of how much "effort" they can complete.</p>
            </div>
            <div class="content-primary">
            	<img src="css/images/Folder-Blue-Download-icon.png" class="detailsimg">
				<ul data-role="listview" id="sbidetailslv" data-inset="true">
					<li data-role="list-divider">
						SBI Details
					</li>
					<li>
						Project ID:
					</li>
				</ul>
				<div data-role="fieldcontain">
				  <label for="sbi_details_update_hrs">Completed Hours:</label>
				  <input type="number" name="sbi_details_update_hrs" id="sbi_details_update_hrs" value=""  />
			  </div>
			  <a href="#sbidetialspg" onClick="sbiupdatecompleted_hours();" data-role="button">Update Completed Hours</a> </div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a href="#sbilistpg" onClick="delete_cuurent_sbi();" data-icon="minus">Delete SBI</a>
						</li>
                        <li>
							<a href="#liveboardpg" data-icon="arrow-r">Live - Scrum Board</a>
						</li>
                        
					</ul>
				</div>
			</div>
		</div>


		<div data-role="page" id="detailspg" data-theme="b">
			<div data-role="header">
				<h1>Details View</h1>
			</div>
			<div data-role="content">
				<div data-role="collapsible-set">
					<div data-role="collapsible">
						<h3>PBI-1</h3>
						<p>
							Content
						</p>
						<div data-role="controlgroup" data-type="horizontal">
							<button>
								Delete PBI
							</button>
							<button>
								Delete all SBIs
							</button>
							<button>
								Edit
							</button>
						</div>
					</div>
					<div data-role="collapsible" data-collapsed="true">
						<h3>PBI-2</h3>
						<p>
							Content
						</p>
					</div>
					<div data-role="collapsible" data-collapsed="true">
						<h3>PBI-3</h3>
						<p>
							Content
						</p>
					</div>
					<div data-role="navbar">
						<ul>
							<li>
								<a href="#" data-icon="plus"></a>
							</li>
							<li>
								<a href="#" data-icon="back"></a>
							</li>
							<li>
								<a href="#" data-icon="star"></a>
							</li>
							<li>
								<a href="#" data-icon="plus"></a>
							</li>
							<li>
								<a href="#" data-icon="arrow-r"></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<h4>Miranda Tech &copy; 2012</h4>
			</div>
		</div>
        
        <!--SBI Add page-->
    <div data-role="page" id="sbiaddpg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
                 <a href="#sbilistpg" onClick="addnewsbiui();" data-icon="arrow-d" class="ui-btn-right">Save</a>
			</div>
			<div data-role="content">
            <div class="content-secondary">
            <h2>Add New SBI</h2>
            <form action="index.html" method="post">
            
			  <div data-role="fieldcontain">
			    <label for="addsbi_name">SBI Name:</label>
			    <input type="text" name="addsbi_name" required id="addsbi_name" value="SBI1"  />
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addsbi_status" class="select">Status:</label>
			    <select name="addsbi_status" id="addsbi_status">
			      <option value="option1">In Progress</option>
			      <option value="option2">Review</option>
			      <option value="option3">Blocked</option>
                  <option value="option3">Done</option>
		        </select>
		      </div>
			  <div data-role="fieldcontain">
                <label for="addsbi_esthours">Estimated Hours:</label>
                <input type="number" name="addsbi_esthours" id="addsbi_esthours" value=""  />
			  </div>
			  <div data-role="fieldcontain">
			    <label for="addsbi_completedhrs">Completed hours:</label>
			    <input type="range" name="addsbi_completedhrs" id="addsbi_completedhrs" value="0" min="0" max="100" />
			  </div>
              </form>
              </div>
              <div class="content-primary">
              <h3>Sprint Backlog</h3>
              <img src="images/artifacts/Graphite-Smooth-Folder-Works-icon.png" class="projecticon"/>
              <p>The sprint backlog is the list of work the Development Team must address during the next sprint. The list is derived by selecting stories/features from the top of the product backlog until the Development Team feels it has enough work to fill the sprint. This is done by the Development Team asking "Can we also do this?" and adding stories/features to the sprint backlog. The Development Team should keep in mind the velocity of its previous Sprints (total story points completed from each of the last sprints stories) when selecting stories/features for the new sprint, and use this number as a guide line of how much "effort" they can complete.</p>
              <p>parturient montes, nascetur ridiculus mus. Fusce felis erat, porta vitae rhoncus non, interdum quis diam. Sed tristique odio quis mi ornare in tincidunt sapien vulputate. Donec libero lorem, sagittis vel imperdiet non, lobortis sit amet nunc. Vestibulum in eros sit amet tellus rutrum placerat. Donec mattis laoreet ornare. Aenean nisi nunc, mollis nec rutrum vel, vestibulum a magna. </p>
              </div>
        </div>
		</div>
        
        <!--PBI Add page-->
    <div data-role="page" id="pbiaddpg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
                 <a href="#pbilistpg" onClick="" data-icon="check" class="ui-btn-right">Save</a>
			</div>
			<div data-role="content">
            <div class="content-primary">
            <h2>Add New PBI</h2>
            <form action="index.html" method="post">
            
			  <div data-role="fieldcontain">
			    <label for="addpbi_id">PBI ID:</label>
			    <input type="number" name="addpbi_id" required id="addpbi_id" value=""  />
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_proid" class="select">Priority ID:</label>
			    <select name="addpbi_proid" id="addpbi_proid">
			      <option value="option1">High</option>
			      <option value="option2">Above Normal</option>
			      <option value="option3">Normal</option>
			      <option value="option3">Below Normal</option>
			      <option value="option3">Lowest</option>
		        </select>
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_dependency">PBI Dependency:</label>
			    <input type="number" name="addpbi_dependency" id="addpbi_dependency" value=""  />
		      </div>
			  <div data-role="fieldcontain">
			    <label for="add_pbi_buiss">Buissness process:</label>
			    <textarea cols="40" rows="8" name="add_pbi_buiss" id="add_pbi_buiss"></textarea>
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_grouping">Grouping:</label>
			    <textarea cols="40" rows="8" name="addpbi_grouping" id="addpbi_grouping"></textarea>
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_userstory">User Story:</label>
			    <textarea cols="40" rows="8" name="addpbi_userstory" id="addpbi_userstory"></textarea>
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_accpcri">Acceptance Criteria:</label>
			    <textarea cols="40" rows="8" name="addpbi_accpcri" id="addpbi_accpcri"></textarea>
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_status" class="select">Status:</label>
			    <select name="addpbi_status" id="addpbi_status">
			      <option value="option1">Not Started</option>
			      <option value="option2">In Progress</option>
			      <option value="option3">Hold</option>
                  <option value="option4">Completed</option>
		        </select>
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_init">Initiated by:</label>
			    <input type="text" name="addpbi_init" id="addpbi_init" value=""  />
		      </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_res">No of Resources:</label>
			    <input type="number" name="addpbi_res" id="addpbi_res" value=""  />
		      </div>
			  <div data-role="fieldcontain">
                <label for="addpbi_startdate">Start Date:</label>
                <input type="text" name="addpbi_startdate" id="addpbi_startdate" value=""  />
			  </div>
			  <div data-role="fieldcontain">
			    <label for="addpbi_end">End Date:</label>
			    <input type="text" name="addpbi_end" id="addpbi_end" value=""  />
		      </div>
              <a href="#pbilistpg" onClick="addnewpbiUI();" data-role="button" data-icon="check" class="ui-btn-right">Save</a>
            </form>
              </div>
              <div class="content-secondary">
              <h3>Product Backlog</h3>
              <img src="images/artifacts/Folder-websites-Folder-icon.png" class="projecticon">
              <p>The product backlog is an ordered list of "requirements" that is maintained for a product. It contains Product Backlog Items that are ordered by the Product Owner based on considerations like risk, business value, dependencies, date needed, etc. The features added to the backlog are commonly written in story format.</p>
            <p>Fill the following details and click on the save to add new PBI</p>
            <ol>
            <li>Enter the PBI ID</li>
            <li>Select the priority</li>
            <li>Enter the PBI dependency</li>
            <li>Enter the PBI bussiness process</li>
            <li>Enter the PBI grouping</li>
            <li>Enter the PBI userstory</li>
            <li>Enter the PBI acceptance criteria</li>
            <li>Enter the PBI status</li>
            <li>Enter the number of resources</li>
            <li>Enter the PBI start date</li>
            <li>Enter the PBI end date</li>
            </ol>
              </div>
        </div>
		</div>
        
         <!--Project Add page-->
    <div data-role="page" id="addprojpg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
                 <a href="" onClick="" data-icon="check" class="ui-btn-right">Save</a>
			</div>
			<div data-role="content">
             <div class="content-secondary">
<h3>Scrum Project</h3>
              <img src="images/artifacts/project.png" class="projecticon"/>
                	<p>
						Scrum is an iterative and incremental methodology for software projects and product- or application-development. It is also one of the variants of agile software development methodologies.
					</p>
                    <p>Fill the following details and click on create to create a new project</p>
                    <ol>
                    <li>Enter the project ID</li>
                    <li>Enter the project name</li>
                    <li>Enter the project description</li>
                    <li>Enter the project status</li>
                    <li>Enter the project Start date</li>
                    <li>Enter the project end date</li>
                    <li>Enter the number of project resources</li>
                    </ol>
              </div>
            <div class="content-primary">
            <form>
            <h2>Add New Project</h2>
            <div data-role="fieldcontain">
              <label for="addproj_projid">Project ID:</label>
              <input type="number" name="addproj_projid" id="addproj_projid" value=""  />
            </div>
            
            <div data-role="fieldcontain">
              <label for="addproj_name">Project Name:</label>
              <input type="text" name="addproj_name" id="addproj_name" value=""  />
            </div>
            <div data-role="fieldcontain">
              <label for="addproj_desc">Project Description:</label>
              <textarea cols="40" rows="8" name="addproj_desc" id="addproj_desc"></textarea>
            </div>
            <div data-role="fieldcontain">
              <label for="addproj_status" class="select">Status:</label>
              <select name="addproj_status" id="addproj_status">
                <option value="option1">Not Started</option>
                <option value="option2">In Progress</option>
                <option value="option3">Hold</option>
                <option value="option4">Completed</option>
              </select>
            </div>
            <div data-role="fieldcontain">
              <label for="addproj_startdate">Start Date:</label>
              <input type="date" name="addproj_startdate" id="addproj_startdate" value=""  />
            </div>
            <div data-role="fieldcontain">
              <label for="addproj_enddate">End Date:</label>
              <input type="date" name="addproj_enddate" id="addproj_enddate" value=""  />
            </div>
            <div data-role="fieldcontain">
              <label for="addproj_res">No of Resources:</label>
              <input type="number" name="addproj_res" id="addproj_res" value=""  />
            </div>
            <a href="#projectspg" onClick="addnewprojUI();" data-role="button" data-icon="check" class="ui-btn-right">Create</a>
            </div>
            </form>
            </div>
            </div>

        
        
		<div data-role="page" id="liveboardpg" data-theme="b">
			<div data-role="header" data-position="fixed">
				<h1>Scrum Board - Live</h1>
                <a href="#" onclick="scrumboardUI();" data-icon="check" class="ui-btn-right">Load sticky notes</a>
			</div>
			<div data-role="content" data-fullscreen="true">
				<div class="ui-grid-d" id="gvlivescrumb">
                
                <div class="ui-block-a canvas_header">
						PBI
					</div>
					<div class="ui-block-b canvas_header">
						SBI/Not Started/Blocked
					</div>
					<div class="ui-block-c canvas_header">
						In Progress
					</div>
					<div class="ui-block-d canvas_header">
						Review
					</div>
					<div class="ui-block-e canvas_header">
						Done
					</div>
					
                	<!--Content-->
                	
					<div class="ui-block-a" id="canvas_block_1_1">
						<div class="stickynote" id="canvas_st1">
                        	<span class="pin"></span>
							<h4>Title #1</h4>
							<p>
								Text Content #1
							</p>
						</div>
                        <div class="stickynote"  id="canvas_st2">
                        	<span class="pin"></span>
							<h4>Title #1</h4>
							<p>
								Text Content #1
							</p>
						</div>
                        <div class="stickynote"  id="canvas_st3"/>
                        	<span class="pin"></span>
							<h4>Title #1</h4>
							<p>
								Text Content #1
							</p>
						</div>
					</div>
                    
					<div class="ui-block-b" id="canvas_block_1_2">
						Block 1,2
					</div>
					<div class="ui-block-c" id="canvas_block_1_3">
						Block 1,3
					</div>
					<div class="ui-block-d" id="canvas_block_1_4">
						Block 1,4
					</div>
					<div class="ui-block-e" id="canvas_block_1_5">
						Block 1,5
					</div>
					<div class="ui-block-a" id="canvas_block_2_1">
						Block 2,1
					</div>
					<div class="ui-block-b" id="canvas_block_2_2">
						Block 2,2
					</div>
					<div class="ui-block-c" id="canvas_block_2_3">
						Block 2,3
					</div>
					<div class="ui-block-d" id="canvas_block_2_4">
						Block 2,4
					</div>
					<div class="ui-block-e" id="canvas_block_2_5">
						Block 2,5
					</div>
					<div class="ui-block-a" id="canvas_block_3_1">
						Block 3,1
					</div>
					<div class="ui-block-b"  id="canvas_block_3_2">
						Block 3,2
					</div>
					<div class="ui-block-c"  id="canvas_block_3_3">
						Block 3,3
					</div>
					<div class="ui-block-d"  id="canvas_block_3_4">
						Block 3,4
					</div>
					<div class="ui-block-e"  id="canvas_block_3_5">
						Block 3,5
					</div>
				</div>
			</div>
		</div>
		<!--Static pages of this app-->
		<div data-role="page" id="terms" data-theme="b">
			<div data-role="header">
				<h1>Terms and Conditions</h1>
			</div>
			<div data-role="content">
				<p>
					The use of this app is subject to the following terms of use:
				</p>
				<ul>
					<li>
						The content of the pages of this app is for your general information and use only. It is subject to change without notice.
					</li>
					<li>
						This app uses local sql database to store user data.
					</li>
					<li>
						Neither we nor any third parties provide any warranty or guarantee as to the accuracy, timeliness, performance, completeness or suitability of the information and materials found or offered on this website for any particular purpose. You acknowledge that such information and materials may contain inaccuracies or errors and we expressly exclude liability for any such inaccuracies or errors to the fullest extent permitted by law.
					</li>
					<li>
						Your use of any information or materials on this app is entirely at your own risk, for which we shall not be liable. It shall be your own responsibility to ensure that any products, services or information available through this app meet your specific requirements.
					</li>
					<li>
						This app contains material which is owned by or licensed to us. This material includes, but is not limited to, the design, layout, look, appearance and graphics. Reproduction is prohibited other than in accordance with the copyright notice, which forms part of these terms and conditions.
					</li>
					<li>
						All trade marks reproduced in this app which are not the property of, or licensed to, the operator are acknowledged on the app.
					</li>
					<li>
						Unauthorised use of this app may give rise to a claim for damages and/or be a criminal offence.
					</li>
					<li>
						From time to time this app may also include links to other websites. These links are provided for your convenience to provide further information. They do not signify that we endorse the website(s). We have no responsibility for the content of the linked website(s).
					</li>
					<li>
						Your use of this app and any dispute arising out of such use of the app is subject to the laws of india.
					</li>
				</ul>
				Do you agree to these terms? <a href="#projectspg" data-role="button" data-inline="true" data-rel="back">Disagree</a>
				<a href="#projectspg" data-role="button" data-inline="true">Agree</a>
			</div>
		</div>
		<div data-role="page" id="aboutapppg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-inset="true">
					<li data-role="list-divider">
						About the scrum board App
					</li>
					<li>
						Adipiscing, turpis amet magnis, dictumst dolor purus, porttitor dolor. Nisi, ac tincidunt facilisis dapibus amet, lectus in placerat magna vel! Enim integer eros velit, tincidunt turpis in, ut purus ac arcu augue. Arcu non mid, hac! Rhoncus rhoncus, ultrices magna non tempor magna risus et! Aenean enim et. Augue ac! Sed? Elit cum porta cum ac, parturient nunc mattis placerat pellentesque vut eu aenean adipiscing elementum ac pellentesque dictumst aliquam turpis cursus, in aenean in risus? Dignissim magna augue in, proin egestas aliquam natoque, adipiscing ac pulvinar nunc, rhoncus ac, diam dolor ridiculus, tincidunt elementum augue ultrices cursus tortor augue nunc mid augue dis est mus placerat tristique mauris parturient, arcu ac est facilisis in phasellus, amet, penatibus tincidunt ac.
					</li>
					<li>
						Adipiscing, turpis amet magnis, dictumst dolor purus, porttitor dolor. Nisi, ac tincidunt facilisis dapibus amet, lectus in placerat magna vel! Enim integer eros velit, tincidunt turpis in, ut purus ac arcu augue. Arcu non mid, hac! Rhoncus rhoncus, ultrices magna non tempor magna risus et! Aenean enim et. Augue ac! Sed? Elit cum porta cum ac, parturient nunc mattis placerat pellentesque vut eu aenean adipiscing elementum ac pellentesque dictumst aliquam turpis cursus, in aenean in risus? Dignissim magna augue in, proin egestas aliquam natoque, adipiscing ac pulvinar nunc, rhoncus ac, diam dolor ridiculus, tincidunt elementum augue ultrices cursus tortor augue nunc mid augue dis est mus placerat tristique mauris parturient, arcu ac est facilisis in phasellus, amet, penatibus tincidunt ac.
					</li>
					<li>
						Adipiscing, turpis amet magnis, dictumst dolor purus, porttitor dolor. Nisi, ac tincidunt facilisis dapibus amet, lectus in placerat magna vel! Enim integer eros velit, tincidunt turpis in, ut purus ac arcu augue. Arcu non mid, hac! Rhoncus rhoncus, ultrices magna non tempor magna risus et! Aenean enim et. Augue ac! Sed? Elit cum porta cum ac, parturient nunc mattis placerat pellentesque vut eu aenean adipiscing elementum ac pellentesque dictumst aliquam turpis cursus, in aenean in risus? Dignissim magna augue in, proin egestas aliquam natoque, adipiscing ac pulvinar nunc, rhoncus ac, diam dolor ridiculus, tincidunt elementum augue ultrices cursus tortor augue nunc mid augue dis est mus placerat tristique mauris parturient, arcu ac est facilisis in phasellus, amet, penatibus tincidunt ac.
					</li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<h4>Miranda Tech &copy; 2012</h4>
			</div>
		</div>
		<div data-role="page" id="tourpg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board</h1>
				<a data-icon="info" class="ui-btn-right" href="#helppg">Full Help</a>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-inset="true">
					<li data-role="list-divider">
						Guided Tour
					</li>
					<li>
						<a href="#">Page</a>
					</li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<h4>Miranda Tech &copy; 2012</h4>
			</div>
		</div>
		<div data-role="page" id="helppg" data-theme="b">
			<div data-role="header">
				<h1>Scrum Board - Full Help</h1>
				<a data-icon="info" class="ui-btn-right" href="#tourpg">Guided Tour</a>
			</div>
			<div data-role="content">
				<div class="content-secondary">
					<ul data-role="listview">
						<li>
							one
						</li>
						<li>
							two
						</li>
						<li>
							three
						</li>
					</ul>
				</div>
				<div class="content-primary">
					<p>
						Adipiscing, turpis amet magnis, dictumst dolor purus, porttitor dolor. Nisi, ac tincidunt facilisis dapibus amet, lectus in placerat magna vel! Enim integer eros velit, tincidunt turpis in, ut purus ac arcu augue. Arcu non mid, hac! Rhoncus rhoncus, ultrices magna non tempor magna risus et! Aenean enim et. Augue ac! Sed? Elit cum porta cum ac, parturient nunc mattis placerat pellentesque vut eu aenean adipiscing elementum ac pellentesque dictumst aliquam turpis cursus, in aenean in risus? Dignissim magna augue in, proin egestas aliquam natoque, adipiscing ac pulvinar nunc, rhoncus ac, diam dolor ridiculus, tincidunt elementum augue ultrices cursus tortor augue nunc mid augue dis est mus placerat tristique mauris parturient, arcu ac est facilisis in phasellus, amet, penatibus tincidunt ac.
					</p>
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<h4>Miranda Tech &copy; 2012</h4>
			</div>
		</div>
		<div data-role="page" id="contactuspg" data-theme="b">
			<div data-role="header">
				<h1>Contact Us</h1>
			</div>
			<div data-role="content">
				<div id="shipDiv" data-role="fieldcontain">
					<label for="contact_name">Name:</label>
					<input id="contact_name" name="contact_name" type="text" />
				</div>
				<div id="contact_emailid" data-role="fieldcontain">
					<label for="contact_emailid">Email ID:</label>
					<input id="contact_emailid" name="contact_emailid" type="text"/>
				</div>
				<div data-role="fieldcontain">
					<label for="contact_comments">Comments:</label>
					<textarea cols="40" rows="8" name="contact_comments" id="contact_comments"></textarea>
				</div>
				<a href="#homepg" data-role="button" data-icon="check">Send</a>
			</div>
			<div data-role="footer" data-position="fixed">
				<h4>Miranda Tech &copy; 2012</h4>
			</div>
		</div>
	</body>
</html>
